<template>
  <!-- {{  props.barcodeList }} -->
  <div class="content">
    <div class="table-default">
      <!-- <el-button type="primary" @click="goBack">返回</el-button> -->
      <el-button type="primary" @click="closeHandler">关闭</el-button>

      <el-button type="warning" @click="handlerPDF" v-loading.fullscreen.lock="fullscreenLoading">确认导出</el-button>
    </div>
    <div class="print-show">
      <img src="" alt="" class="imgshow" />
      <img src="" alt="" class="imgshow" />
      <div ref="print" id="barcode" style="width: 470px; height: 470px">
        <div
          v-for="(item, index) in props.barcodeArr"
          :key="index"
          style="margin: 10px auto; page-break-after: always; width: 98%; height: 98%; padding: 20px 0; display: flex; justify-content: center; align-items: center"
        >
          <div class="tableBox" id="tableBox" style="display: flex; justify-content: center; align-items: center; page-break-after: always">
            <table style="border-collavertical-align: middle; font-weight: bold; pse: collapse; width: 98%; height: 98%; vertical-align: middle" id="table">
              <tr>
                <td style="vertical-align: middle; font-weight: bold; border: solid 1px #000; text-align: center; white-space: nowrap" rowspan="2">
                  <img :src="item.Twocode" class="codeImg" style="z-index: 99" />
                </td>
                <td style="vertical-align: middle; font-weight: bold; border: solid 1px #000; text-align: center; white-space: nowrap; padding: 5px 3px">箱号</td>
                <td style="border: solid 1px #000; text-align: center; white-space: nowrap; padding: 5px 3px" colspan="3">{{ item.barcode }}</td>
              </tr>
              <tr>
                <td style="vertical-align: middle; font-weight: bold; border: solid 1px #000; text-align: center; white-space: nowrap; padding: 5px 3px">供应商单号:</td>
                <td style="vertical-align: middle; font-weight: bold; border: solid 1px #000; text-align: center; white-space: nowrap; padding: 5px 3px" colspan="3">{{ item.supplierOrder }}</td>
              </tr>
              <tr>
                <td style="vertical-align: middle; font-weight: bold; border: solid 1px #000; text-align: center; white-space: nowrap; padding: 5px 3px">采购订单：</td>
                <td style="vertical-align: middle; font-weight: bold; border: solid 1px #000; text-align: center; padding: 5px 3px" colspan="4">{{ item.fbillno }}</td>
                <!-- <td style="vertical-align: middle;font-weight: bold; border: solid 1px #000; text-align: center; padding: 5px 10px " colspan="4">QWC-2212-150139联丰BS26/BS25/BS18/BS17/MJ191</td> -->
              </tr>
              <tr>
                <td style="height: 35px; vertical-align: middle; font-weight: bold; border: solid 1px #000; text-align: center; white-space: nowrap; padding: 5px 3px">存货编码：</td>
                <td style="height: 35px; vertical-align: middle; font-weight: bold; border: solid 1px #000; text-align: center; white-space: nowrap; padding: 5px 3px" colspan="3">
                  {{ item.fmaterialid }}
                </td>
                <td style="height: 35px; vertical-align: middle; font-weight: bold; border: solid 1px #000; text-align: center; white-space: nowrap; padding: 5px 3px">
                  数量 : {{ Number(item.quantity) }}
                </td>
              </tr>
              <tr>
                <td style="vertical-align: middle; font-weight: bold; border: solid 1px #000; text-align: center; white-space: nowrap; padding: 5px 3px">存货全名：</td>
                <td style="vertical-align: middle; font-weight: bold; border: solid 1px #000; text-align: center; padding: 5px 10px" colspan="4">{{ item.fmaterialname }}</td>
              </tr>
              <tr>
                <td style="vertical-align: middle; font-weight: bold; border: solid 1px #000; text-align: center; white-space: nowrap; padding: 5px 3px">本箱数量：</td>
                <td style="vertical-align: middle; font-weight: bold; border: solid 1px #000; text-align: center; white-space: nowrap; padding: 5px 3px"></td>
                <td style="vertical-align: middle; font-weight: bold; border: solid 1px #000; text-align: center; white-space: nowrap; padding: 5px 3px">个</td>
                <td style="vertical-align: middle; font-weight: bold; border: solid 1px #000; text-align: center; padding: 5px; width: 20px" rowspan="2">物料箱号</td>
                <!-- <td style="vertical-align: middle;font-weight: bold;border: solid 1px #000; text-align: center; white-space: nowrap; padding: 5px 3px" rowspan="2">
                  <img class="codeImg" :src="item.TwocodefMaterialid" />
                </td> -->
                <td style="vertical-align: middle; font-weight: bold; border: solid 1px #000; text-align: center" rowspan="2"><img :src="item.TwocodefMaterialid" style="margin: 0 auto" /></td>
              </tr>
              <tr>
                <td style="vertical-align: middle; font-weight: bold; border: solid 1px #000; text-align: center; white-space: nowrap; padding: 5px 3px">发货日期：</td>
                <td style="vertical-align: middle; font-weight: bold; border: solid 1px #000; text-align: center; white-space: nowrap; padding: 5px 3px" colspan="2">{{ item.deliverydate }}</td>
              </tr>
              <tr>
                <td style="vertical-align: middle; font-weight: bold; border: solid 1px #000; text-align: center; white-space: nowrap; padding: 5px 3px">生产日期：</td>
                <td style="vertical-align: middle; font-weight: bold; border: solid 1px #000; text-align: center; white-space: nowrap; padding: 5px 3px"></td>
                <td style="vertical-align: middle; font-weight: bold; border: solid 1px #000; text-align: center; white-space: nowrap; padding: 5px 3px">有效日期：</td>
                <td style="vertical-align: middle; font-weight: bold; border: solid 1px #000; text-align: center; white-space: nowrap; padding: 5px 3px" colspan="2"></td>
              </tr>
              <tr>
                <td style="vertical-align: middle; font-weight: bold; border: solid 1px #000; text-align: center; white-space: nowrap; padding: 5px 3px">备注：</td>
                <td style="vertical-align: middle; font-weight: bold; border: solid 1px #000; text-align: center; white-space: nowrap; padding: 5px 3px" colspan="4"></td>
              </tr>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

 
<script lang="ts" setup>
import { ref, watchEffect } from 'vue'
// import { getLodop } from '/admin/utils/LodopFuncs'
import printJS from 'print-js'
import { PDFDocument, rgb } from 'pdf-lib'
import Vue from 'vue'
import VueToPdf from 'vue-to-pdf'
import jsPDF from 'jspdf'
import html2canvas from 'html2canvas'
import storage from '/admin/utils/storage'
// import jsPDF from 'jspdf';
import { ElLoading } from 'element-plus'
import { useRouter, useRoute } from 'vue-router'
const router = useRouter()
const route = useRoute()

const print = ref()

// let barcodeList = ref(JSON.parse(route.query.barcodeList))
// let barcodeList = ref(storage.getItem('barcodeArr'))
const fullscreenLoading = ref(false)

const props = defineProps({
  barcodeArr: Array,
})
// console.log('barcodeList', barcodeList.value)

let emit = defineEmits(['send-data', 'send-close'])

let handlerPDF = () => {
  fullscreenLoading.value = true
  generatePDF()
}

// 创建一个新的jsPDF实例

let generatePDF = () => {
  let doc = new jsPDF({
    unit: 'mm',
    format: [100, 100], // 设置纸张大小为100mm*100mm
  })
  let tableHTMLs = document.querySelectorAll('#table')
  console.log('表格节点', tableHTMLs)

  let codeImgs = document.querySelectorAll('.codeImg')

  let arr = Array.from(tableHTMLs)
  let imgshows = document.querySelectorAll('.imgshow')

  // doc = new jsPDF()

  const promise = arr.map((tableHTML, index) => {
    return html2canvas(tableHTML).then(canvas => {
      const imgData = canvas.toDataURL('image/jpeg', 1.0)
      doc.addImage(imgData, 'JPEG', 3, 3, 95, 95)
      // canvas.getContext('2d').clearRect()
      if (index != arr.length - 1) doc.addPage()
    })
  })
  Promise.all(promise).then(() => {
    doc.save(`送货单${props.barcodeArr[0].supplierOrder}.pdf`)
    // doc = null
    fullscreenLoading.value = false
    doc = null
  })
}

// 关闭当前弹窗
const closeHandler = () => {
  emit('send-close', false)
}

// let goBack = () => {
//   // let routeList = storage.getItem('routeList')
//   let routeList = JSON.parse(sessionStorage.getItem('routeList'))

//   routeList = routeList.filter(item => item.title != '送货单导出')
//   // storage.setItem('routeList', routeList)
//   sessionStorage.setItem('routeList',JSON.stringify(routeList))
//   router.go(-1)
// }
</script>

<style lang="css" scoped>
.content {
  width: 100%;
  height: 100%;
  /* background-color: antiquewhite; */
}
.table-default {
  width: 100%;
  height: 50px;
  line-height: 50px;
}
.print-show {
  background-color: #fff;
  /* border: 1px solid #ccc; */
  /* box-shadow: 2px 3px 10px #ccc; */
  /* border-radius: 10px; */
  width: 100%;
  /* height: 100%; */
  /* height: 60vh; */
  overflow: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #ccc;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 5px;
}

.bordered-table {
  border-collapse: collapse;
}

/* .bordered-table th,
.bordered-table td {
  border: 1px solid #000;
  padding: 8px;
} */
</style>

<!-- <style lang="scss" scoped>
 @media print {
  * {
    margin: 0 !important;
    padding: 0 !important;
  }
  .LocationTemplate {
    border: 2px solid red;
    width: 400px !important;
    height: 400px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .LocationTemplate .box {
    padding: 10px 20px !important;
    box-sizing: border-box !important;
    width: calc(90% / 6 * 4) !important;
    height: 90% !important;
    border: 2px solid #000 !important;
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-evenly !important;
  }
  .box .item {
    width: 100%;
    height: 100%;
    font-weight: 600 !important;
  }
  .item-center {
    font-size: larger !important;
    text-align: center !important;
  }

  .imgBox {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 50px !important;
    height: 50px !important;
  }
} 
</style> -->
 
 <!-- <style>

* {
  margin: 0 !important;
  padding: 0 !important;
}
ul {
  list-style: none !important;
}
.LocationTemplate {
  border: 1px solid green !important;
  width: 500px !important;
  height: 500px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.box {
  padding: 10px 20px !important;
  box-sizing: border-box;
  width: calc(90% / 6 * 4);
  height: 90%;
  border: 2px solid #000;
}
.box ul {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}

.box ul li:last-child {
  width: 100%;
  height: 45%;
  /* border: 1px solid #000; */
  /* background-color: antiquewhite; */
  display: flex;
  align-items: center;
  justify-content: center;
}

.box ul li {
  font-weight: 600;
  /* border: 1px solid green; */
}
.li-center {
  font-size: larger;
  text-align: center; white-space: nowrap;
}

.imgBox {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 60%;
  height: 80%;
  border: 1px solid #000;
}

img {
  display: inline-block;
  width: 90%;
}
</style> -->
